<template>
  <div id="BasciTools-map" style="width:100%;height:658px"></div>
  <div id="BasciTools-mapDiv" class="ol-popup">
    <!-- 显示控件 -->
    <div id="BasciTools-setDivPosition"  class="init-setDivPosition">
      <!-- 切换卫星和街道地图 -->
			<p @click="switchMap" class="init-setDivPosition-selected">
				<template v-if="switchMapBool==false">
					<img src="@/assets/map/image/weixing-b.png" title="切换卫星地图"><br/><span>卫星图</span>
				</template>
				<template v-else>
					<img src="@/assets/map/image/jiedao-b.png" title="切换街道地图"><br/><span>街道图</span>
				</template>
			</p>
			<!-- 返回主界面 -->
			<p @click="zoomDefaultPosition" :class="{ 'init-setDivPosition-selected': zoomDefaultPositionBool==false }">
				<img src="@/assets/map/image/newImage/home.png" title="返回主界面"><br/><span>主界面</span>
			</p>
			<!-- 显示工具箱 -->
			<p @click="showHideToolsBoxDiv" :class="{ 'init-setDivPosition-selected': showHideToolsBox==false }">
				<template v-if="showHideToolsBox">
					<img src="@/assets/map/image/tools.png" title="打开工具箱"><br/><span>工具箱</span>
				</template>
				<template v-else>
					<img src="@/assets/map/image/tools.png" title="关闭工具箱"><br/><span>工具箱</span>
				</template>
			</p>
      <!-- 查询 -->
      <p @click="returnEstimateButton" :class="{ 'init-setDivPosition-selected': selectBool==true }">
        <template v-if="selectBool">
					<img src="@/assets/map/image/newImage/search.png" title="查询"><br/><span style="font-size:12px;width:72px;border:0;">查询</span>
				</template>
				<template v-else>
					<img src="@/assets/map/image/newImage/search.png" title="查询"><br/><span style="font-size:12px;width:72px;border:0;">查询</span>
				</template>
      </p>
    </div>
    <!-- 工具箱 -->
		<div id="BasciTools-ToolsBoxDiv" class="init-ToolsBoxDiv">
			<p @click="measureToolBox" :class="{ 'init-setDivPosition-selected': showHideMeasureTool==false }">
				<template v-if="showHideMeasureTool">
					<img title="开启测量工具" src="@/assets/map/image/cel.png"><br/><span>测量</span>
				</template>
				<template v-else>
					<img title="关闭测量工具" src="@/assets/map/image/cel.png"><br/><span>测量</span>
				</template>
			</p>
			<p @click="positionToolBox" :class="{ 'init-setDivPosition-selected': showHidePositionTool==false }">
        <template v-if="showHidePositionTool">
          <img title="开启定位工具" src="@/assets/map/image/dingw.png"><br/><span style="border:0;">定位</span>
        </template>
        <template v-else>
          <img title="关闭定位工具" src="@/assets/map/image/dingw.png"><br/><span style="border:0;">定位</span>
        </template>
      </p>
		</div>
    <!-- 所有工具 -->
    <div id="BasciTools-AllToolsDiv" class="init-AllToolsDiv">
      <!-- 测量工具 -->
      <div id="BasciTools-MeasureToolsDiv" class="init-AllToolsDivFloat">
        <p @click="measureDistance" :class="{ 'init-setDivPosition-selected': measureDistanceBool==false }">
          <template v-if="measureDistanceBool">
            <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br/><span>测量距离</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br/><span>测量距离</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="measureArea" :class="{ 'init-setDivPosition-selected': measureAreaBool==false }">
          <template v-if="measureAreaBool">
            <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br/><span>测量面积</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br/><span>测量面积</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="stopMeasure" :class="{ 'init-setDivPosition-selected': stopMeasureBool==false }">
          <template v-if="stopMeasureBool">
            <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br/><span>结束测量</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br/><span>结束测量</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="clearMeasure" :class="{ 'init-setDivPosition-selected': clearMeasureBool==false }">
          <template v-if="clearMeasureBool">
            <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br/><span>清空结果</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br/><span>清空结果</span>
          </template>
        </p>
      </div>
      <!-- 定位工具 -->
      <div id="BasciTools-MousePositionDiv">
        <span><img class="init-jingd" src="@/assets/map/image/jingd.png" title="鼠标左键在地图上点击位置的经度值"></span>
        <input id="BasciTools-MousePositionLon" type="text" value="">
        <span><img class="init-weid" src="@/assets/map/image/weid.png" title="鼠标左键在地图上点击位置的纬度值"></span>
        <input id="BasciTools-MousePositionLat" type="text" value="">
        <p @click="clearPosition" :class="{ 'init-setDivPosition-selected': clearPositionBool==false }">
          <template v-if="clearPositionBool">
            <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br/><span>清空结果</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br/><span>清空结果</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="addPosition" :class="{ 'init-setDivPosition-selected': addPositionBool==false }">
          <template v-if="addPositionBool">
            <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br/><span>添加定位点</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br/><span>添加定位点</span>
          </template>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import Map from 'ol/Map';
import View from 'ol/View';
import VectorLayer from 'ol/layer/Vector';
import {Vector as VectorSource} from 'ol/source';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {Select, Draw, Modify, Snap, Translate} from 'ol/interaction';
import {unByKey} from 'ol/Observable';
import CircleDraw from 'ol/geom/Circle';
import Overlay from 'ol/Overlay';
import Polygon from 'ol/geom/Polygon';
import LineString from 'ol/geom/LineString';
import {getArea, getLength} from 'ol/sphere';
import {Fill, Stroke, Style, Icon, Circle,Text} from 'ol/style';
import dingweiImg from '@/assets/map/image/newImage/blueMarker.png';
import {
  GetGridCellInfosParameters,
  GridCellInfosService,
  MapService,
  GetFeaturesByGeometryParameters,FeatureService
} from '@supermap/iclient-ol';
import { getProjection,getResolutions,getTiandituVecMap,getTiandituVecText,getTiandituImgMap,getTiandituImgText,
  getRESTLayer,getVectorTileLayer,iServerHttp,meterToDegree } from "@/map/projMap.js";

export default({
  name: 'BasicToolMap',
  props: {
    closeSelectBool: {
      type: Boolean,
      required: true,
      default: false
    },
    layerInfo: {
      type: Object,
      required: true,
      default: {}
    },
    removeLayer: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  emits:["openSelectTool","getLegendHtml"],
  data(){
    return {
      str: 'BasciTools',
      map: null,
      center: [105, 34],
      zoom: 4,
      layer1: null,
      layer2: null,
      layer3: null,
      layer4: null,
      source: null,// 矢量绘制图层
      measure: null,
      measureSource: null,// 测量结果图层
      switchMapBool: false, // 卫星图
      uploadBool: false,
      selectBool:false,
      managerBool: false,
      zoomDefaultPositionBool: true,// 返回主界面
      showHideToolsBox: true,// 工具箱
      showHideMeasureTool:true,//显示|隐藏测量工具
      showHidePositionTool: true,// 定位工具
      measureDistanceBool: true,
      measureAreaBool: true,
      stopMeasureBool: true,
			clearMeasureBool: true,
      clearPositionBool: true,
			addPositionBool: true,
      helpTooltipElement:null,
      helpTooltip:null,
      measureTooltipElement:null,
      measureTooltip:null,
      measureTooltipArray:[],//全部测量结果Overlay数组
    }
  },
  watch: {
    closeSelectBool: {
      handler: function(newVal,oldVal){
        this.allDataList = newVal;
        if(newVal){
          this.closeSelect();
        }
      },
      immediate:true
    },
    layerInfo: {
      handler: function(newVal,oldVal) {
        this.createLayerService(newVal)
      },
      immediate: true
    },
    removeLayer: {
      handler: function(newVal,oldVal){
        if(newVal){
          this.clearMapLayer();
        }
      },
      immediate:true
    }
  },
  mounted(){
    let that = this
    this.$nextTick(function(){
      setTimeout(() => {
        // 初始化地图
        that.initMap()
      }, 200)
    })
  },
  methods: {
    initMap() {
      let that = this
      let targetMap = document.getElementById(this.str + '-map')
      // 清空targetMap
      targetMap.innerHTML = ''
      // 获取地图div的高度
      this.autodivheight()
      // 浏览器窗口发生变化时同时变化DIV高度
      window.onresize = this.autodivheight()
      if (this.map){ //避免地图重复加载
        return
      }
      //获取投影4490坐标系
      this.projection4490 = getProjection();
      //初始化地图信息
      this.map = new Map({
        target: targetMap.id,
        view: new View({
          center: this.center,
          maxZoom: 18,
          minZoom: 4,
          zoom: this.zoom,
          constrainResolution:true,//缩放地图可移动到最近的缩放级别（整数zoom级别）
          projection: 'EPSG:4490',
        })
      });
      this.layer1 = getTiandituVecMap()
      this.map.addLayer(this.layer1)
      this.layer2 = getTiandituVecText()
      this.map.addLayer(this.layer2)
      this.layer1.setZIndex(0)
      this.layer2.setZIndex(0)
      //矢量绘制图层
      this.source = new VectorSource({
        wrapX: false
      });
      let vectorLayer = new VectorLayer({
        source: that.source,
        projection: 'EPSG:4490'
      });
      this.map.addLayer(vectorLayer);
      vectorLayer.setZIndex(2);
      //测量结果图层
      this.measureSource = new VectorSource({
        wrapX: false
      });
      let measureLayer = new VectorLayer({
        source: that.measureSource,
        projection: 'EPSG:4490'
      });
      this.map.addLayer(measureLayer);
      this.map.on('click', function(event){
        let coordinate = that.map.getEventCoordinate(event.originalEvent)
        if (that.showHidePositionTool == false) {
          document.getElementById(that.str + '-MousePositionLon').value = coordinate[0]
          document.getElementById(that.str + '-MousePositionLat').value = coordinate[1]
        }
      })
    },
    closeSelect() {
      this.selectBool = false
    },
    clearMapLayer() {
      debugger
      let layers = this.map.getLayers()
      for(let i=0;i<layers.array_.length;i++){
        if (layers.array_[i].values_.source.options) {
          if (layers.array_[i].values_.source.options.url) {
            this.map.removeLayer(layers.array_[i])
            this.clearMapLayer()
          }
        }	
      }
    },
    createLayerService(objInfo) {
      if(JSON.stringify(objInfo) != '{}') {
        let url = encodeURI(objInfo.layerInfo.url +"/layers.rjson");
        let zIndex = objInfo.layerInfo.zIndex
        let sqlText = '';
        if(objInfo.sInfo != '') {
          sqlText += "province like '%" + objInfo.sInfo + "%'"
        }
        if(objInfo.shiInfo != '') {
          sqlText += " and city like '%" + objInfo.shiInfo + "%'"
        }
        if(objInfo.xInfo != '') {
          sqlText += " and county like '%" + objInfo.xInfo + "%'"
        }
        let that = this;
        //查询REST图层信息
        let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
        httpRequest.open('GET', url, true);//第二步：打开连接  将请求参数写在url中
        httpRequest.send();//第三步：发送请求  将请求参数写在URL中
        //获取数据后的处理程序
        httpRequest.onreadystatechange = function () {
          if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            let json = httpRequest.responseText;//获取到json字符串，还需解析
            let obj = JSON.parse(json);
            if(obj.length>0){
              if(sqlText!=null && sqlText!=""){
                for(let i=0;i<obj.length;i++){
                  let layers = obj[i].subLayers.layers;
                  for(let j=0;j<layers.length;j++){
                    layers[j].displayFilter = sqlText;//SQL查询过滤
                  }
                }
              }
              debugger
              that.postTempLayersSet(objInfo.layerInfo.url,zIndex,obj);//创建并获取超图临时图层
            }
          }
        }
      }
    },
    postTempLayersSet(layerUrl,zIndex,obj){//创建并获取超图临时图层
      let that = this;
      let url = encodeURI(layerUrl+"/tempLayersSet.rjson");
      let entry = JSON.stringify(obj);
      let xhr = new XMLHttpRequest();//第一步：建立所需的对象
      xhr.open("POST", url, true);//第二步：打开连接  将请求参数写在url中
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
      //获取数据后的处理程序
      xhr.onreadystatechange = function(){
        let readyState = xhr.readyState;
        if (readyState == 4){
          let status = xhr.status;
          let responseText =  xhr.responseText ;
          let result = JSON.parse(responseText);
          if(result.succeed){
            let layerID = result.newResourceID;
            let newResourceLocation = result.newResourceLocation;
            //that.$message({ message: '创建临时图层成功!', type: 'success' });
            //查询超图临时图层
            //that.getMapTempLayer(iIndex,jIndex,layerUrl,layerID,zIndex);
            //根据layerUrl、临时图层layerID和zIndex查询并添加瓦片地图图层REST
            that.createMapRestLayer(layerUrl,layerID,zIndex);
          }else{
            //that.$message({ message: '创建临时图层失败!', type: 'warning' });
          }
          xhr.onreadystatechange = function(){};
          xhr = null;
        }
      };
      xhr.send(entry);//第三步：发送请求  将请求参数写在URL中
    },
    //REST图层查询
    createMapRestLayer(layerUrl,layerID,zIndex){//根据layerUrl、临时图层layerID和zIndex查询并添加瓦片地图图层REST
      let that = this;
      //瓦片地图图层
      let mapService = new MapService(layerUrl);//根据超图REST图层获取图层信息
      mapService.getMapInfo(function (serviceResult) {
        if(serviceResult.result!=undefined){
          let mapJSONObj = serviceResult.result;
          //获取超图发布的REST图层
          //let options = TileSuperMapRest.optionsFromMapJSON(layerUrl, mapJSONObj);
          let layerName = mapJSONObj.name;//图层名称
          //获取图层范围
          let bounds = mapJSONObj.bounds;
          let left = bounds.left;
          let bottom = bounds.bottom;
          let right = bounds.right;
          let top = bounds.top;
          let origin = [left, top];//左上角
          let extent = [left, bottom, right, top];//图层范围
          //获取超图发布的REST图层（自定义比例尺）
          let layer = getRESTLayer(layerUrl,layerID,origin,extent,mapJSONObj,17);
          //设置图层叠加顺序
          layer.setZIndex(zIndex);
          // if(//添加到REST图层数组
          // that.allRestVectorLayerArray[iIndex][jIndex].restTileLayer == null) {
          //   //添加到REST图层数组
          //   that.allRestVectorLayerArray[iIndex][jIndex].restTileLayer = layer;
          //   console.log('测试1')
            that.map.addLayer(layer);
          // }
          // if(layerID && layerID!==""){
          //   //设置临时图层ID
          //   that.allRestVectorLayerArray[iIndex][jIndex].tempLayerId = layerID;
          // }
          // console.log("extent");
          // console.log(extent);
          //缩放到图层范围
          that.map.getView().fit(extent, {padding: [50, 50, 50, 50]});
          //图层范围
          let bbox = extent.join(",");
          //图层显示名称
          // let realName = that.allRestVectorLayerArray[iIndex][jIndex].name;
          //获取图例
          that.getLayerLegend('realName',layerUrl,bbox);//根据url获取图层图例信息
        }
      });
    },
    getLayerLegend(realName,layerUrl,bbox){//根据url获取图层图例信息
      let that = this;
      layerUrl += '/legend.json?bbox='+bbox;
      layerUrl += '&returnVisibleOnly=false';//是否只返回当前地图范围内可见要素的图例。默认为 false
      //图层图例信息查询
      let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
      httpRequest.open('GET', layerUrl, true);//第二步：打开连接  将请求参数写在url中  ps:"http://localhost:8080/rest/xxx"
      httpRequest.send();//第三步：发送请求  将请求参数写在URL中
      /**
       * 获取数据后的处理程序
       */
      httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          let json = httpRequest.responseText;//获取到json字符串，还需解析
          let obj = JSON.parse(json);
          let layerLegends = obj.layerLegends;
          if(layerLegends!=null && layerLegends.length>0){
            let html = '';
            for(let i=0;i<layerLegends.length;i++){
              let layerLegend = layerLegends[i];
              //获取图层名称
              let layerName = layerLegend.layerName;
              let legends = layerLegend.legends;
              if(legends!=null && legends.length>0){
                if(layerName.indexOf("#")!=-1 && legends.length==1){
                  let textImgUrl = iServerHttp() + "/iserver/manager/static/Theme/image/LabelUniform.png";
                  //文字图层不显示图例
                  if(legends[0].url==textImgUrl){
                    continue;
                  }
                }
                if(legends.length>1){//多图例图层
                  html += '<p style="text-align: center;font-weight: bold;">'+realName+'</p>';
                  for(let j=0;j<legends.length;j++){
                    let legend = legends[j];
                    let values = legend.values;
                    if(values==null){
                      continue;
                    }
                    let imageData = legend.imageData;
                    let contentType = legend.contentType;
                    let url = legend.url;
                    let label = legend.label;
                    let width = legend.width;
                    let height = legend.height;
                    let imgSrc = "data:image/jpeg;base64,"+imageData;
                    html += '<p style="height: '+height+'px;">';
                    html += '<img style="width:'+width+'px;height:'+height+'px" src="'+imgSrc+'" />';
                    html += '<span style="position: relative;top: -2px;left: 10px;height: 16px;font-size: 16px;">'+label+'</span>';
                    html += '</p>';
                  }
                }else{//单一图例图层
                  let legend = legends[0];
                  let values = legend.values;
                  let imageData = legend.imageData;
                  let contentType = legend.contentType;
                  let url = legend.url;
                  let label = legend.label;
                  let width = legend.width;
                  let height = legend.height;
                  let imgSrc = "data:image/jpeg;base64,"+imageData;
                  html += '<p style="height: '+height+'px;">';
                  html += '<img style="width:'+width+'px;height:'+height+'px" src="'+imgSrc+'" />';
                  html += '<span style="position: relative;top: -2px;left: 10px;height: 16px;font-size: 16px;">'+realName+'</span>';
                  html += '</p>';
                }
              }
            }
            //图例html
            that.$emit("getLegendHtml",{name:realName,legendHtml:html,show:true});
          }
        }
      };
    },
    returnEstimateButton() {
      if(this.selectBool) {
        this.selectBool = false
        this.$emit("openSelectTool",false);
      }else{
        this.selectBool = true
        this.$emit("openSelectTool",true);
      }
    },
    // 街道图与卫星图切换
    switchMap() {
      if (this.switchMapBool) {// 显示街道图
        this.switchMapBool = false
        if (this.layer1 == null) {
          this.layer1 = getTiandituVecMap()
          this.map.addLayer(this.layer1)
        }
        if (this.layer2 == null) {
          this.layer2 = getTiandituVecText()
          this.map.addLayer(this.layer2)
        }
        this.layer1.setVisible(true);
        this.layer2.setVisible(true);
        this.layer3.setVisible(false);
        this.layer4.setVisible(false);
        this.layer1.setZIndex(0);
        this.layer2.setZIndex(0);
      } else {
        this.switchMapBool = true
        if (this.layer3 == null) {
          this.layer3 = getTiandituImgMap()
          this.map.addLayer(this.layer3)
        }
        if (this.layer4 == null) {
          this.layer4 = getTiandituImgText()
          this.map.addLayer(this.layer4)
        }
        this.layer1.setVisible(false)
        this.layer2.setVisible(false)
        this.layer3.setVisible(true)
        this.layer4.setVisible(true)
        this.layer3.setZIndex(0)
        this.layer4.setZIndex(0)
      }
    },
    zoomDefaultPosition() {// 返回主界面
      this.map.updateSize();
      this.map.getView().setCenter(this.center);
      this.map.getView().setZoom(this.zoom);
      this.zoomDefaultPositionBool = true;
    },
    showHideToolsBoxDiv() {// 显示工具箱
      if (this.showHideToolsBox) {
        this.showHideToolsBox = false
        document.getElementById(this.str + '-ToolsBoxDiv').style.display = 'block'
      } else {
        this.showHideToolsBox = true
        document.getElementById(this.str + '-ToolsBoxDiv').style.display = 'none'
      }
    },
    measureToolBox() {
      if (this.showHideMeasureTool) {
        this.showHideMeasureTool = false
        document.getElementById(this.str + '-MeasureToolsDiv').style.display = 'block'
      } else {
        this.showHideMeasureTool = true
        document.getElementById(this.str + '-MeasureToolsDiv').style.display = 'none'
      }
    },
    positionToolBox() {
      if (this.showHidePositionTool) {
        this.showHidePositionTool = false
        document.getElementById(this.str + '-MousePositionDiv').style.display = 'block'
      } else {
        this.showHidePositionTool = true
        document.getElementById(this.str + '-MousePositionDiv').style.display = 'none'
      }
    },
    measureDistance() {
      if(this.source!=null){
        //地图工具箱--开启测距
        this.setMapToolBox('MeasureDistance');
        //设置样式
        this.measureDistanceBool = false;
        this.measureAreaBool = true;
        this.stopMeasureBool = true;
        this.clearMeasureBool = true;
      }
    },
    measureArea() {
      if(this.source!=null){
        //地图工具箱--开启测面
        this.setMapToolBox('MeasureArea');
        //设置样式
        this.measureAreaBool = false;
        this.measureDistanceBool = true;
        this.stopMeasureBool = true;
        this.clearMeasureBool = true;
      }
    },
    stopMeasure() {
      if(this.source!=null){
        //地图工具箱--停止测量
        this.setMapToolBox('StopMeasure');
        //设置样式
        this.stopMeasureBool = false;
        this.measureDistanceBool = true;
        this.measureAreaBool = true;
        this.clearMeasureBool = true;
      }
    },
    clearMeasure () {
      if(this.source!=null){
        //地图工具箱--清空测量结果
        this.setMapToolBox('ClearMeasure');
        //设置样式
        this.clearMeasureBool = false;
        this.measureDistanceBool = true;
        this.measureAreaBool = true;
        this.stopMeasureBool = true;
      }
    },
    clearPosition() {
      this.clearPositionBool = false;
      this.addPositionBool = true;
      //地图工具箱--清空
      this.setMapToolBox("Clear");
    },
    addPosition () {
      let that = this
      this.clearPositionBool = true
      this.addPositionBool = false
      if (that.source != null) {
        let longitude = document.getElementById(this.str+"-MousePositionLon").value;
        let latitude = document.getElementById(this.str+"-MousePositionLat").value;
        //处理经纬度
        let lonlat = this.getLonLat(longitude,latitude);
        if (lonlat != null) {
          let featureTmp = new Feature({
            geometry: new Point(lonlat)
          });
          let style = that.getPointStyle()
          featureTmp.setStyle(style)
          featureTmp.setProperties({
            type: 'position',
            longitude: longitude,
            latitude: latitude
          })
          that.source.addFeature(featureTmp)
          that.map.getView().setCenter(lonlat)
          that.map.getView().setZoom(12)
        }
      }
    },
    getPointStyle(){// 定位点图标样式
      let style = new Style({
        image: new Icon({
          src: dingweiImg,
          anchor: [0.5, 1]
        }),
      });
      return style;
    },
    getLonLat(longitude, latitude) {
      let lonlat = null
      if (longitude != null && latitude != null & longitude != '' && latitude != '') {
        let lon = Number(longitude)
        let lat = Number(latitude)
        if (lon > 0 && lon < 180 && lat > 0 && lat < 180) {
          lonlat = [ lon, lat]
        }
      }
      return lonlat
    },
    //地图工具箱
    setMapToolBox(value){
      let that = this;
      if (value === 'Clear') {//清空
        //清空
        that.source.clear();
        //停止绘制|修改|拖拽|选择
        clearInteraction();
      }else if (value === 'Point' || value === 'LineString' || value === 'Polygon' || value === 'Circle') {//开启绘制
        //点|线|面|圆绘制
        //开启绘制
        startDrawInteraction(value,false);
      }else if (value === 'FreeHandLineString' || value === 'FreeHandPolygon') {//开启绘制
        //手绘线|手绘面
        value = value.split("FreeHand")[1];
        //开启绘制
        startDrawInteraction(value,true);
      }else if (value === 'StopDraw') {//停止绘制
        //停止绘制
        stopDrawInteraction();
      }else if (value === 'Snap') {//开启捕捉
        //开启捕捉
        startSnapInteraction();
      }else if (value === 'NotSnap') {//停止捕捉
        //停止捕捉
        stopSnapInteraction();
      }else if (value === 'Modify') {//开启修改
        //开启修改
        startModifyInteraction();
      }else if (value === 'NotModify') {//停止修改
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
      }else if (value === 'Drag') {//开启拖拽
        //开启拖拽
        startDragInteraction();
      }else if (value === 'NotDrag') {//停止拖拽
        //停止拖拽
        stopDragInteraction();
      }else if (value === 'Select') {//开启选择
        //开启选择
        startSelectInteraction();
      }else if (value === 'NotSelect') {//停止选择
        //停止选择
        stopSelectInteraction();
      } else if (value === 'MeasureDistance') {//开启测距
        //开启测距
        startMeasureInteraction('LineString');
      } else if (value === 'MeasureArea') {//开启测面
        //开启测面
        startMeasureInteraction('Polygon');
      } else if (value === 'StopMeasure') {//停止测量（测距|测面）
        //停止测量
        stopMeasureInteraction();
      } else if (value === 'ClearMeasure') {//清空测量结果
        //停止测量
        stopMeasureInteraction();
        //清空测量结果
        clearMeasureResult();
      }

      //停止绘制|修改|拖拽|选择
      function clearInteraction() {
        //停止拖拽
        stopDragInteraction();
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
        //停止绘制
        stopDrawInteraction();
      }

      //停止捕捉
      function stopSnapInteraction(){
        if (that.snap) {
          that.map.removeInteraction(that.snap);
          that.snap = null;
        }
      }

      //开启捕捉
      function startSnapInteraction(){
        //停止捕捉
        stopSnapInteraction();
        //开启捕捉
        that.snap = new Snap({
          source: that.source
        });
        that.map.addInteraction(that.snap);
      }

      //停止拖拽
      function stopDragInteraction() {
        //停止拖拽
        if (that.drag) {
          that.map.removeInteraction(that.drag);
          that.drag = null;
        }
      }

      //开启拖拽
      function startDragInteraction() {
        //停止绘制
        stopDrawInteraction();
        //停止修改
        stopModifyInteraction();
        //开启选择
        startSelectInteraction();
        //停止拖拽
        stopDragInteraction();
        //开启拖拽
        that.drag = new Translate({
          features: that.select.getFeatures()
        });
        that.map.addInteraction(that.drag);
      }

      //停止修改
      function stopModifyInteraction() {
        //停止修改
        if (that.modify) {
          that.map.removeInteraction(that.modify);
          that.modify = null;
        }
      }

      //开启修改
      function startModifyInteraction() {
        //停止绘制
        stopDrawInteraction();
        //开启选择
        startSelectInteraction();
        //停止修改
        stopModifyInteraction();
        //开启修改
        // that.modify = new Modify({
        // 	features: that.select.getFeatures()
        // });
        let b = that.map.getInteractions()
        that.modify = new Modify({
          source: that.source
        });
        that.map.addInteraction(that.modify);
      }

      //停止选择
      function stopSelectInteraction() {
        //停止选择
        if (that.select) {
          that.map.removeInteraction(that.select);
          that.select = null;
        }
      }

      //开启选择
      function startSelectInteraction() {
        //停止选择
        stopSelectInteraction();
        //开启选择
        that.select = new Select({
          wrapX: false
        });
        that.map.addInteraction(that.select);
      }

      //停止绘制
      function stopDrawInteraction() {
        //停止绘制
        if (that.draw) {
          that.map.removeInteraction(that.draw);
          that.draw = null;
        }
      }

      //开启绘制
      function startDrawInteraction(type,bool) {
        //停止拖拽
        stopDragInteraction();
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
        //停止绘制
        stopDrawInteraction();
        if(bool){//手绘线|手绘面
          that.draw = new Draw({
            source: that.source,
            type: type,
            snapTolerance: 20,
            freehand: true
          });
          that.map.addInteraction(that.draw);
        }else{//点|线|面|圆绘制
          that.draw = new Draw({
            source: that.source,
            type: type,
            snapTolerance: 20
          });
          that.map.addInteraction(that.draw);
          //绘制结束时触发的事件
          that.draw.on('drawend', function(e) {
            if (e.feature && e.feature.getGeometry() instanceof CircleDraw) {
              let radius = document.getElementById('drawCircleRadius').value
              if (radius != '') {
                radius = radius * 1000
                let metersPerUnit = that.map.getView().getProjection().getMetersPerUnit();
                let circleRadius =  radius / metersPerUnit;
                e.feature.getGeometry().setRadius(circleRadius)
              }
            }
            let geometry = e.feature.getGeometry();
            //停止绘制
            stopDrawInteraction();
            let style
            //设置样式
            if (type == 'Point') {
              style = that.drawPointStyle()
            } else {
              style = that.getPolyonStyle("red");
            }
            e.feature.setStyle(style);
            //计算面积
            if (geometry instanceof Polygon || geometry instanceof CircleDraw) {
              let area = getPolygonArea(geometry);
              //清空查询行政区划列表
              that.parentdistrictList = [];
              //清空区域查询行政区划名称列表
              that.parentdistrictNameList = [];
              //清空区域查询行政区划编码列表
              that.parentdistrictCodeList = [];
              //正在查询
              that.mapLoading("正在查询，请稍候...");
              //新查询绘制区域经纬度任务地区
              that.queryDrawAreaNew(e.feature);
              /*//几何查询--省值
              that.queryProvince(e.feature);
              //几何查询--省会市值
              that.queryProCenCity(e.feature);
              //几何查询--市值
              that.queryCity(e.feature);
              //几何查询--区县值
              that.queryArea(e.feature);
              //获取多边形面内的均匀点分布数组
              let allLonLatArr = that.getPolygonExtentPoints(geometry);
              //查询绘制区域经纬度点地址
              that.queryDrawArea(e.feature,allLonLatArr);*/
              //设置属性
              e.feature.setProperties({area: area});
            }
          });
        }
      }
      //计算面积
      function getPolygonArea (geometry) {
        let area 
        let output
        let circleArea = geometry
        if (geometry instanceof CircleDraw) {
          circleArea = fromCircle(geometry)
        }
        area = getArea(circleArea, {projection: 'EPSG:4490'})
        // 这里一定要给坐标，和地图坐标保持一致，否则面积不准
        output = Math.round((area / 1000000) * 100) / 100;//平方公里
        return output;
      }

      ////////////////////////////////////////////////////////////////////测量工具箱
      //格式化距离
      function formatLength(line) {
        const length = getLength(line, {projection: 'EPSG:4490'});
        let output;
        if (length > 100) {
          output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
        } else {
          output = Math.round(length * 100) / 100 + ' ' + 'm';
        }
        return output;
      }

      //格式化面积
      function formatArea(polygon) {
        const area = getArea(polygon, {projection: 'EPSG:4490'});
        let output;
        if (area > 10000) {
          output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
        } else {
          output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
        }
        return output;
      }

      //创建新的提示tip
      function createHelpTooltip() {
        if (that.helpTooltipElement!=null) {
          that.helpTooltipElement.parentNode.removeChild(that.helpTooltipElement);
        }
        that.helpTooltipElement = document.createElement('div');
        that.helpTooltipElement.className = 'ol-tooltip hidden';
        that.helpTooltip = new Overlay({
          element: that.helpTooltipElement,
          offset: [15, 0],
          positioning: 'center-left',
        });
        that.map.addOverlay(that.helpTooltip);
      }

      //创建新的测量提示
      function createMeasureTooltip() {
        if (that.measureTooltipElement!=null) {
          that.measureTooltipElement.parentNode.removeChild(that.measureTooltipElement);
        }
        that.measureTooltipElement = document.createElement('div');
        that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
        that.measureTooltip = new Overlay({
          element: that.measureTooltipElement,
          offset: [0, -15],
          positioning: 'bottom-center',
          stopEvent: false,
          insertFirst: false,
        });
        that.map.addOverlay(that.measureTooltip);
      }
      //开启测量工具
      function startMeasureInteraction(type) {
        //停止测量工具
        stopMeasureInteraction();

        console.log(type);
        //开启测量工具--绘制
        that.measure = new Draw({
          source: that.measureSource,
          type: type,
          style: new Style({
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)',
            }),
            stroke: new Stroke({
              color: 'rgba(0, 0, 0, 0.5)',
              lineDash: [10, 10],
              width: 2,
            }),
            image: new Circle({
              radius: 5,
              stroke: new Stroke({
                color: 'rgba(0, 0, 0, 0.7)',
              }),
              fill: new Fill({
                color: 'rgba(255, 255, 255, 0.2)',
              }),
            }),
          }),
        });
        that.map.addInteraction(that.measure);

        //创建新的测量提示
        createMeasureTooltip();
        //创建新的提示tip
        createHelpTooltip();

        let listener;
        that.measure.on('drawstart', function (evt) {
          //设置sketch
          that.sketch = evt.feature;

          let tooltipCoord = evt.coordinate;

          listener = that.sketch.getGeometry().on('change', function (evt) {
            const geom = evt.target;
            let output;
            if (geom instanceof Polygon) {
              output = formatArea(geom);
              tooltipCoord = geom.getInteriorPoint().getCoordinates();
            } else if (geom instanceof LineString) {
              output = formatLength(geom);
              tooltipCoord = geom.getLastCoordinate();
            }
            that.measureTooltipElement.innerHTML = output;
            that.measureTooltip.setPosition(tooltipCoord);
          });
        });
        //完成测量绘制
        that.measure.on('drawend', function () {
          that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
          that.measureTooltip.setOffset([0, -7]);
          //添加到数组
          that.measureTooltipArray.push(that.helpTooltip);
          //添加到数组
          that.measureTooltipArray.push(that.measureTooltip);
          //清空sketch
          that.sketch = null;
          //清空tooltip
          that.measureTooltipElement = null;
          createMeasureTooltip();
          unByKey(listener);
        });
      }

      //停止测量工具
      function stopMeasureInteraction() {
        //停止绘制
        stopDrawInteraction();
        //停止测量工具
        if (that.measure) {
          that.map.removeInteraction(that.measure);
          that.measure = null;
          //隐藏提示tip
          that.helpTooltipElement.classList.add('hidden');
          //移除测量提示
          if(that.helpTooltip!=null){
            that.map.removeOverlay(that.helpTooltip);
          }
          if(that.measureTooltip!=null){
            that.map.removeOverlay(that.measureTooltip);
          }
        }
      }
      
      //清空测量结果
      function clearMeasureResult(){
        if(that.measureSource!=null){
          //清空测量结果
          that.measureSource.clear();
          //清空测量结果提示数组
          if(that.measureTooltipArray.length>0){
            for(let i=0;i<that.measureTooltipArray.length;i++){
              that.map.removeOverlay(that.measureTooltipArray[i]);
            }
            that.measureTooltipArray = [];
          }
        }
      }
    },
    autodivheight() {//自动获取div高度
      //获取浏览器窗口高度
      let winHeight = 0;
      if (window.innerHeight) {
        winHeight = window.innerHeight;
      } else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight;
      }
      //通过深入Document内部对body进行检测，获取浏览器窗口高度
      if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
      }
      //全屏时窗口高度:864px,地图div高度:754px
      let tempHeight = 864;
      let mapTempHeight = 754;
      let mapHeight = winHeight - tempHeight + mapTempHeight;
      //最小高度
      if(mapHeight<480){
        mapHeight = 480;
      }
      //设置地图高度
      document.getElementById(this.str+"-map").style.height= mapHeight +"px";
      console.log("窗口高度："+winHeight+"地图高度："+mapHeight);
      //resize事件--刷新地图,确保地图不变形
      if(this.map){
        this.map.updateSize();
        console.log("resize事件--刷新地图,确保地图不变形");
      }
    },
  } 
})
</script>